<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello Quark</title>
    <style>
      body { margin: 0; display: grid; justify-content: center;}
      p { text-align: center; }
      a { color: #55bffe;}
    </style>

    <script src="https://unpkg.com/quarkc@1.0.33/lib/index.umd.js"></script>
    <script src="https://unpkg.com/quark-ui-rate@0.8.0/lib/index.umd.js"></script>
  </head>
  <body>

    <quark-ui-rate
      id="rate"
      size="1.5rem"
      value="4.7"
      space="0.5rem"
      color="#ddd"
      activeColor="linear-gradient(to right, #a8f, #8af)"
    ></quark-ui-rate>

  </body>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const rate = document.getElementById("rate");

      rate.addEventListener("input", (event) => {
        rate.setAttribute("value", event.detail);
      });

      rate.addEventListener("change", (event) => {
        console.log("value changed", event.detail);
      });
    });
  </script>
</html>
